import React ,{useEffect,useState} from 'react'
import {Wrapper} from './style'
import { Swiper, SwiperSlide  } from 'swiper/react';
import { Popup, SideBar ,CapsuleTabs} from 'antd-mobile'
import { Pagination,Autoplay } from 'swiper';
import './style.css'
import { connect } from 'react-redux'
import { rootState } from '@/store'
import  {Container} from './styleinfo'
import classNames from 'classnames'
import { getKeypoints ,getRelation,getCity} from '@/store/actionCreators';
import Lazyload from 'react-lazyload'
import tv from '@/assets/images/tv.png'

interface rankProps  {
  keypointsList:any[],
  relationList:any[],
  cityList:any[],
  getKeypoints: () => void,
  getRelation: () => void,
  getCity: () => void
}
const Ranking:React.FC<rankProps> = (props) => {
  const [activeKey, setActiveKey] = useState('key1')
  const {keypointsList,relationList,cityList} = props
  const {getKeypoints,getRelation,getCity} = props
  const [visible, setVisible] = useState(false)

  useEffect(()=> {
    if(!keypointsList.length)
    getKeypoints()
    if(!relationList.length)
    getRelation()
    if(!cityList.length)
    getCity()
  },[])
  return (
   <Wrapper>
    <div className="top">
    <video autoPlay width="100%" height="100%" loop
      src="https://cloud.video.taobao.com/play/u/1039245357/p/1/e/6/t/1/320997474153.mp4">
    </video>
    </div>
    <div className="head-content">
      <img src="https://gw.alicdn.com/imgextra/i1/O1CN012X9AUK1f3bYMax50t_!!6000000003951-2-tps-1108-316.png_570x10000.jpg_.webp"/>
      <div className="keypoints">
        <div className="points">
          <div className="points-top">每日</div>
          <div className="points-bottom">动态更新</div>
        </div>
        <div className="points">
          <div className="points-top">过亿</div>
          <div className="points-bottom">真实数据</div>
        </div>
        <div className="points">
          <div className="points-top">精选</div>
          <div className="points-bottom">潮流玩法</div>
        </div>

      </div>
    </div>
    <div className="keyview">
      <Swiper
          modules={[Pagination,Autoplay]}
          autoplay={{ disableOnInteraction: false ,delay:500}}
          speed={500}
          spaceBetween={10}
          slidesPerView={3}
          pagination={{
              bulletClass: 'swiper-pagination-bullet',
              bulletActiveClass: 'swiper-pagination-bullet-active',
              clickable: true,
              type: 'bullets'
          }}
          loop
          >
        {
          keypointsList.map((item,index) => {
            return (
              <SwiperSlide key={index} >
              <Lazyload placeholder = {
                <img src={tv} height="100" width="100%"/>
                }>
                <img className="view"
                  src={item.pic} style={{width:"100%"}}/>
              </Lazyload>
              </SwiperSlide>
            )
          })
        }
      </Swiper>
    </div>
   <div className="body">
    <div className="city-body">
      <span>中国</span>
      <img className="pos"  
          onClick={() => {
            setVisible(true)
              }}
        src="https://gw.alicdn.com/imgextra/i4/O1CN01l1cKjt22PnuduDtcS_!!6000000007113-2-tps-22-12.png_110x10000.jpg_.webp"/>
        <Popup
          visible={visible}
          onMaskClick={() => {
            setVisible(false)
          }}
          position='top'
          bodyStyle={{ 
            minHeight: '80vh',
            paddingTop:'20px' ,
            fontSize:'15px'
          }}
          >
          <div className="popup">
            <div className="side">
            <SideBar activeKey={activeKey} onChange={setActiveKey}>
              <SideBar.Item key='key1' title="城市榜" />
              <SideBar.Item key='key2' title="区域榜" />
              <SideBar.Item key='key3' title="全国榜" />
            </SideBar>
          </div>
          <div className="main">
          <div
          className={classNames(
          'content',
            activeKey === 'key1' &&'active'
          )}
          >
            <Container>
              <div className="title">
                <span style={{marginRight:'10px'}}>我的位置</span>
                <div className="pos">
                  <i className='icon iconfont icon-dingwei'></i>
                  <span>定位失败</span>
                </div>
              </div>
              <div className="cityselect">
                城市选择
              </div>
              <div className="city-content">
              {
                cityList.map((item,index) => {
                    return (
                    <div className="city-list" key={index}>
                    <img src={item.url}/>
                    <div className="cityname">{item.cityname}</div>
                    </div>
                    )
                    } 
                  )
               }
              </div>
              <div className="btn-bottom"  onClick={() =>setVisible(false)}>
              <div className="btn-reset">取消</div>
            <div className="btn-confirm">确定</div>
              </div>
            </Container>
           </div>
          <div
          className={classNames(
           'content',
            activeKey === 'key2' && 'active'
          )}
          >
           123
          </div>
          <div
          className={classNames(
           'content',
            activeKey === 'key3' && 'active'
          )}
          >
         <div>
         <img className='all' onClick={() =>setVisible(false)}
            src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cc747895bbac40968ac5b057bbd93b8e~tplv-k3u1fbpfcp-watermark.image?"
            />
          <div className="btn-bottom"  onClick={() =>setVisible(false)}>
            <div className="btn-reset">取消</div>
          <div className="btn-confirm">确定</div>
        </div>
         </div>
          </div>
      </div>
    </div>
        </Popup>
    </div>
    <div className="cate-body">景点</div>
   </div>
   <CapsuleTabs defaultActiveKey='1'>
      {
        relationList.map(data =>
          <CapsuleTabs.Tab title={data.title} key={data.key}>
            {
              data.content.map((item :any,index : number) => 
              <div className={classNames("card-list",{add:index>=3})} key={index}>
              <div className="top-header">
                <div className="top-left">
                    <div className="rank-text">TOP {index+1}</div>
                    <div className="rate-count">热度值{item.hot}</div>
                    <img src="https://gw.alicdn.com/imgextra/i1/O1CN01G4Hwmt1jQHaTX8fkB_!!6000000004542-2-tps-32-40.png_110x10000.jpg_.webp" 
                      alt="" className="rate-up-icon" />
                </div>
                <div className="rate-view">
                  <i className='iconfont icon-shoucang_o'></i>
                  <div className="shoucang">收藏</div>
                </div>
              </div>
                <div className="content-main">
                    <img src={item.url} className="main-left"/>
                    <div className="main-right">
                      <div className="main-right-top">
                        <span>{item.poiName}</span>
                        <div className="poi-level">{item.scenicLevel}</div>
                      </div>
                      <div className="section-info">
                        <span className="rate-text">{item.score}分</span>
                        <span className="price-text">门票￥{item.price}起</span>
                      </div>
                      <div className="section-info">{item.district}</div>
                      <div className="poi-tag-list">
                        <div className="poi-tag-text">{item.tagList[0].text}</div>
                        <div className="poi-tag-text">{item.tagList[1].text}</div>
                      </div>
                    </div>
                </div>
                <div className="recommend-reason">
                  {item.recommend}
                </div>
              </div>
              )
            }
          </CapsuleTabs.Tab>
  
        )
      }
    </CapsuleTabs>
   </Wrapper>
  )
}
export default connect (
  (state :rootState) => ({
    keypointsList:state.home.keypointsList,
    relationList: state.home.relationList,
    cityList: state.home.cityList
  }),
  {
    getKeypoints,
    getRelation,
    getCity
  }
  )(Ranking)